<template>
	<view class="ic-container" @click="cardClick">
		<view v-if="title" class="ic-title" :style={color:colors}>
			{{ title }}
			<slot></slot>
		</view>
		<view :class="{'ic-line': true,fileUnLine: isFile&&it.label.includes('附件')}" v-for="(it, i) in column"
			:key="it.id">
			<span class="ic-label">
				{{it.label }}&nbsp;:
			</span>
			<!-- 第一个 -->
			<span v-if="!it.slotName&&!dictsData.includes(it.key)&&!it.slotNameValue" class="ic-info"
				:style="{color:it.slotNameColor?data[it.slotNameColor]=='0' ?'#F59A23':data[it.slotNameColor]=='1'?'#D9001B':'': setColor(it)}">{{data[it.key] ||(data.manufactures? data.manufactures[it.key]:data[it.key]===0?'0':'') }}</span>
			<!-- 第二个 -->
			<span v-else-if="dictsData.includes(it.key)" class="ic-info">{{fiters(it.key,data[it.key])}}</span>
			<!-- 第三个 -->
			<span v-else-if="it.slotNameValue" class="ic-info">
				{{data.approvalStatus=== 0 ? '未提交' : data.approvalStatus=== 1 ? '处理中':data.approvalStatus=== 2?'已完成':data.approvalStatus=== 3?'已作废':'已驳回'}}
			</span>
			<!-- <slot v-else :name="it.slotName" :row="data"></slot> -->
		</view>
		<view v-show="rightArrow" style="position: absolute;right: 0;top: 50%;transform: translateY(-50%);">
			<u-icon name="arrow-right"></u-icon>
		</view>

	</view>
</template>

<script>
	export default {
		name: "InfoCard",
		props: {
			// 默认标题颜色
			colors: {
				type: String,
				default: '#303133'
			},
			// 字典数据
			dicts: {
				type: Object,
				default: () => ({})
			},
			title: String,
			data: {
				type: Object,
				default: () => ({})
			},
			column: {
				type: Array,
				default: () => ({
					label: '',
					key: '',
					slotName: ''
				})
			},
			// 是否显示右箭头
			rightArrow: {
				type: Boolean,
				default: false
			},
			// 是否是附件
			isFile: {
				type: Boolean,
				default: false
			}
		},

		data() {
			return {
				dictsData: ['modelNumberDictValue', 'material_specifications', 'model_number'],
			}
		},
		methods: {
			setColor(it) {
				if (!it.color) return ''
				if (this.data.planDeliveryStyle == 2 || this.data.planProductionStyle == 2) {
					return it.color
				}

			},
			// 过滤(后期改字典的话，很重要)
			fiters(name, value) {
				switch (name) {
					case 'modelNumberDictValue':
						name = 'model_number'
						break;
					case 'material_specifications':
						name = 'material_specifications'
						break;
					case 'model_number':
						name = 'model_number'
						break;
				}
				if (!this.dicts[name] || !this.dicts[name].length) return
				return this.dicts[name].filter(v => v.dictValue == value)[0].dictLabel
			},
			cardClick() {
				this.$emit('cardClick', this.data)
			}
		}
	}
</script>

<style scoped lang="scss">
	.ic-container {
		width: 100%;
		box-sizing: border-box;
		border-bottom: 0.5rpx solid #dee2eb;
		padding: 28rpx 0rpx 28rpx;
		position: relative;
	}

	.ic-title {
		font-size: 28rpx;
		color: #2289FF;
		font-weight: 700;
		display: flex;
		align-items: center;
		// border: 1px solid green;
	}

	.ic-line {
		margin-top: 16rpx;
		font-size: 28rpx;
		font-family: 'PingFang SC';
		display: flex;
		align-items: center;

		.ic-label {
			margin-right: 18rpx;
			color: #606266;
		}
	}

	.fileUnLine {
		display: block !important;
	}

	.ic-info {
		color: #303133;
		max-width: 420rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding: 5rpx 0rpx;
	}
</style>
